<template>
  <div class="page">
    <div class="toolbar">
      <h2>订单管理</h2>
      <div class="filters">
        <el-input v-model="filters.search" placeholder="搜索单号/买家" clearable class="w-240" />
        <el-select v-model="filters.status" placeholder="状态" clearable class="w-160">
          <el-option label="待支付" value="待支付" />
          <el-option label="已支付" value="已支付" />
          <el-option label="待发货" value="待发货" />
          <el-option label="已发货" value="已发货" />
          <el-option label="已完成" value="已完成" />
          <el-option label="已取消" value="已取消" />
          <el-option label="退款中" value="退款中" />
          <el-option label="已退款" value="已退款" />
        </el-select>
        <el-date-picker v-model="filters.range" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
        <el-button @click="refresh">刷新</el-button>
        <el-button @click="exportCsv">导出</el-button>
      </div>
    </div>

    <div class="stats">
      <div class="card"><div class="t">今日订单</div><div class="v">{{ stats.todayOrders }}</div></div>
      <div class="card"><div class="t">今日销售额</div><div class="v">¥{{ formatMoney(stats.todayAmount) }}</div></div>
      <div class="card"><div class="t">待发货</div><div class="v">{{ stats.toShip }}</div></div>
      <div class="card"><div class="t">退款中</div><div class="v">{{ stats.refunding }}</div></div>
    </div>

    <div class="table">
      <div class="thead">
        <span>单号</span>
        <span>下单时间</span>
        <span>买家</span>
        <span>金额</span>
        <span>状态</span>
        <span>操作</span>
      </div>
      <div class="tbody">
        <div class="tr" v-for="o in dataList" :key="o.id">
          <span>{{ o.sn }}</span>
          <span>{{ o.createdAt }}</span>
          <span>{{ o.buyer }}</span>
          <span>¥{{ formatMoney(o.amount) }}</span>
          <span>{{ o.status }}</span>
          <span>
            <button class="link" @click="view(o)">详情</button>
            <button v-if="o.status==='待支付'" class="link" @click="pay(o)">支付</button>
            <button v-if="o.status==='已支付'" class="link" @click="ship(o)">发货</button>
            <button v-if="o.status==='已发货'" class="link" @click="complete(o)">完成</button>
            <button v-if="o.status==='待支付'" class="link" @click="cancel(o)">取消</button>
            <button v-if="o.status==='退款中'" class="link" @click="refund(o)">退款</button>
          </span>
        </div>
      </div>
    </div>

    <el-dialog v-model="visible" title="订单详情" width="720px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="单号">{{ current?.sn }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ current?.createdAt }}</el-descriptions-item>
        <el-descriptions-item label="买家">{{ current?.buyer }}</el-descriptions-item>
        <el-descriptions-item label="金额">¥{{ formatMoney(current?.amount) }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ current?.status }}</el-descriptions-item>
      </el-descriptions>
      <el-table :data="current?.items || []" border stripe class="mt-12">
        <el-table-column prop="code" label="编码" width="120" />
        <el-table-column prop="name" label="名称" min-width="160" />
        <el-table-column prop="qty" label="数量" width="100" />
        <el-table-column prop="price" label="单价" width="120" />
        <el-table-column label="小计" width="120">
          <template #default="{ row }">{{ formatMoney(Number(row.qty||0)*Number(row.price||0)) }}</template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="visible=false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'
import { useOrderStore } from '@/stores/order.js'

const store = useOrderStore()
const filters = reactive({ search:'', status:'', range:[] })
const stats = computed(()=> store.statsToday)
const dataList = computed(()=> store.filtered(filters))
const visible = ref(false)
const current = ref(null)

function formatMoney(n){ return Number(n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }

onMounted(()=>{ store.initialize(); refresh() })

function refresh(){}
function view(o){ current.value=o; visible.value=true }
function exportCsv(){ store.exportOrders(dataList.value) }

function pay(o){ store.setStatus(o.id, '已支付', '确认收款') }
function ship(o){ store.setStatus(o.id, '已发货', '安排发货') }
function complete(o){ store.setStatus(o.id, '已完成', '订单完成') }
function cancel(o){ store.setStatus(o.id, '已取消', '取消订单') }
function refund(o){ store.setStatus(o.id, '已退款', '退款完成') }
</script>

<style scoped>
.page { padding: 16px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.filters { display: flex; gap: 12px; align-items: center; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.card { background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.card .t { color: #6b7280; font-size: 12px; }
.card .v { font-weight: 700; margin-top: 6px; font-size: 18px; }
.table { background: #fff; border-radius: 10px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.thead, .tr { display: grid; grid-template-columns: 160px 160px 1fr 120px 120px 220px; align-items: center; gap: 8px; }
.thead { color: #6b7280; font-size: 12px; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.tr { padding: 10px 0; border-bottom: 1px solid #f8fafc; }
.link { background: transparent; border: none; color: #10b981; cursor: pointer; }
.mt-12 { margin-top: 12px; }
@media (max-width: 1024px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } .thead, .tr { grid-template-columns: 120px 1fr 80px 80px 100px; } }
</style>


